<template>
	<view v-show="store.wholeLoading" class="wholeLoading loadingClass">
		<!-- 这里加载动画  区分为两种   一种是全局的  一种是遮罩 通过store共享状态管理 -->
		<view class="completePercent">
			<view class="percentLine" :style="`--progress:${store.wholeLoadingPercent}%`">
			</view>
		</view>
	</view>
	<view v-show="store.shadeLoading" class="shadeLoading loadingClass">
		<view class="completePercent">
			<view class="percentLine" :style="`--progress:${store.shadeLoadingPercent}%`">
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted
	} from 'vue';
	import {
		usePiniaStore
	} from '../../store';
	const store = usePiniaStore()
</script>

<style scoped>
	.loadingClass {
		width: 100%;
		height: 100%;
		z-index: 10;
		position: absolute;
		top: 0;
		left: 0;
	}
	.completePercent {
		position: absolute;
		height: 1.5625rem;
		width: 70%;
		border: 1px solid #eee;
		border-radius: 20rpx;
		bottom: 10px;
		transform: translateX(50%);
		left: -20%;
		box-sizing: border-box;
		background: #c6c6c6;
	}

	.wholeLoading {
		/* background-image: url("https://youimg1.c-ctrip.com/target/100u090000003lpukCCD4.jpg"); */
	}

	.shadeLoading {
		background: #8d8d8d9e;
	}
	@property --progress{
		syntax:<percentage>&#39;;  
		/* 定义格式  百分比+% */
		inherits:false;
		/* 是否继承 */
		initial-value:0%;
		/* 默认值 */
	}
	
	.percentLine{
		position: absolute;
		left: 0%;
		top: 0%;
		height: 100%;
		width:var(--progress);
		border-radius: 20rpx;
		background:linear-gradient(90deg, #0f0, #0ff 100%,transparent 0);
		transition:.3s --progress;
	}
	
</style>